<template>
  <div class="task-list-container">
    <!-- 分类标签栏 -->
    <div class="status-tabs">
      <div class="tabs-left">
        <el-tabs v-model="activeStatus" @tab-change="handleStatusChange">
          <el-tab-pane :label="$t('assets.taskList.all')" name="all" />
          <el-tab-pane :label="$t('assets.taskList.pending')" name="pending" />
          <el-tab-pane :label="$t('assets.taskList.grading')" name="grading" />
          <el-tab-pane :label="$t('assets.taskList.correction')" name="correction" />
          <el-tab-pane :label="$t('assets.taskList.correcting')" name="correcting" />
          <el-tab-pane :label="$t('assets.taskList.completed')" name="completed" />
        </el-tabs>
      </div>
      <!-- 创建教学任务 -->
      <div class="tabs-right">
        <el-button type="primary" @click="createTask">
          {{ $t('assets.dashboard.createTeachingTask') }}
        </el-button>
      </div>
    </div>

    <!-- 筛选功能栏 -->
    <div class="filter-section">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item :label="$t('assets.taskList.taskName') + ':'">
          <el-input v-model="searchForm.taskName" :placeholder="$t('assets.taskList.pleaseEnterTaskName')" clearable @input="handleSearch"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item :label="$t('assets.taskList.subjectType') + ':'">
          <el-select v-model="searchForm.subjects" :placeholder="$t('assets.taskList.pleaseSelectSubject')" multiple clearable @change="handleSearch"
            style="width: 200px;">
            <el-option :label="$t('assets.subjects.math')" value="math" />
            <el-option :label="$t('assets.subjects.chinese')" value="chinese" />
            <el-option :label="$t('assets.subjects.english')" value="english" />
            <el-option :label="$t('assets.subjects.other')" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('assets.taskList.taskTime') + ':'">
          <el-config-provider :locale="zhCn">
            <el-date-picker
              v-model="searchForm.selectedDate"
              type="date"
              :placeholder="$t('assets.taskList.selectDate')"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleSearch"
              style="width: 180px;"
              :teleported="false"
            />
          </el-config-provider>
        </el-form-item>
        <el-form-item>
          <el-button @click="resetSearch">{{ $t('assets.taskList.reset') }}</el-button>
          <el-button type="primary" @click="handleSearch">{{ $t('assets.taskList.query') }}</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 任务列表表格 -->
    <div class="task-table">
      <!-- 有数据时显示表格 -->
      <div v-if="filteredTaskList.length > 0">
        <el-table :data="paginatedTaskList" :loading="loading" stripe border style="width: 100%" v-loading="loading">
          <!-- <el-table-column type="index" :label="$t('assets.taskList.serialNumber')" width="120" style="text-align: center;"/> -->
          <el-table-column prop="name" :label="$t('assets.taskList.taskName')" width="320" style="text-align: start;">
            <template #default="{ row }">
              <div class="task-name-cell">
                <el-icon
                  class="task-icon"
                  :color="getSubjectColor(row.subject)"
                  :style="{ backgroundColor: getSubjectBackgroundColor(row.subject) }"
                >
                  <Document />
                </el-icon>
                <div class="task-info">
                  <div class="task-title clickable" @click="viewTaskDetail(row)">{{ row.title }}</div>
                  <div class="task-subtitle">{{ row.description }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="studentCount" :label="$t('assets.taskList.relatedStudents')" width="160" align="center">
            <template #default="{ row }">
              <el-popover placement="top" :width="300" trigger="hover">
                <template #reference>
                  <span class="student-count clickable" @click="showStudentDialog(row)">
                    {{ row.studentCount }}{{ $t('assets.taskList.people') }}
                  </span>
                </template>
                <div class="student-tooltip-content">
                  <div class="tooltip-title">{{ $t('assets.taskList.relatedStudents') }}</div>
                  <div class="tooltip-students">
                    <div v-for="student in getTaskStudents(row)" :key="student.id" class="tooltip-student">
                      <span class="student-name">{{ student.name }}</span>
                      <span class="student-class">{{ student.classes.join('、') }}</span>
                    </div>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column :label="$t('assets.taskList.taskTime')" min-width="220">
            <template #default="{ row }">
              <div class="task-time">
                {{ formatDate(row.startTime) }} 到 {{ formatDate(row.endTime) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" :label="$t('assets.taskList.status')" width="280" class-name="status-column">
            <template #default="{ row }">
              <div class="status-progress-container">
                <!-- 创建阶段 -->
                <div class="status-step">
                  <img
                    :src="getStepIcon('created', row.status)"
                    class="step-icon"
                    alt="创建"
                  />
                  <span
                    class="step-text"
                    :style="{ color: getStepColor('created', row.status) }"
                  >
                    创建
                  </span>
                </div>

                <!-- 箭头 -->
                <div class="step-arrow">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M6 4L10 8L6 12" stroke="#E4E7ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>

                <!-- 批改阶段 -->
                <div class="status-step">
                  <img
                    :src="getStepIcon('grading', row.status)"
                    class="step-icon"
                    alt="批改"
                  />
                  <span
                    class="step-text"
                    :style="{ color: getStepColor('grading', row.status) }"
                  >
                    {{ getGradingStepText(row.status) }}
                  </span>
                </div>

                <!-- 箭头 -->
                <div class="step-arrow">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M6 4L10 8L6 12" stroke="#E4E7ED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </div>

                <!-- 订正阶段 -->
                <div class="status-step">
                  <img
                    :src="getStepIcon('correction', row.status)"
                    class="step-icon"
                    alt="订正"
                  />
                  <span
                    class="step-text"
                    :style="{ color: getStepColor('correction', row.status) }"
                  >
                    {{ getCorrectionStepText(row.status) }}
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('assets.taskList.operation')" width="200" fixed="right">
            <template #default="{ row }">
              <div class="action-links">
                <template v-for="(action, index) in getVisibleActions(row.status)" :key="action.key">
                  <!-- 显示前两个操作 -->
                  <template v-if="index < 2">
                    <span
                      class="action-link"
                      @click="handleAction(action.key, row)"
                    >
                      {{ action.text }}
                    </span>
                    <span v-if="index < Math.min(1, getVisibleActions(row.status).length - 1)" class="action-separator">|</span>
                  </template>
                </template>

                <!-- 如果超过2个操作，显示省略号和下拉菜单 -->
                <template v-if="getVisibleActions(row.status).length > 2">
                  <span class="action-separator">|</span>
                  <el-dropdown @command="(command: string) => handleAction(command, row)">
                    <span class="action-link more-actions">
                      ···
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-for="action in getVisibleActions(row.status).slice(2)"
                          :key="action.key"
                          :command="action.key"
                        >
                          {{ action.text }}
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </template>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="pagination-container">
          <el-config-provider :locale="zhCn">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="filteredTaskList.length"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-config-provider>
        </div>
      </div>

      <!-- 空状态 -->
      <EmptyState
        v-else
        text="尚未创建教学任务"
        button-text="+ 创建教学任务"
        @action="createTask"
      />
    </div>

    <!-- 关联学生弹窗 -->
    <el-dialog v-model="studentDialogVisible" :title="$t('assets.taskList.relatedStudents')" width="500px">
      <div class="student-list">
        <div v-for="student in selectedTaskStudents" :key="student.id" class="student-item">
          <div class="student-name">{{ student.name }}</div>
          <div class="student-classes">{{ student.classes?.join('、') }}</div>
        </div>
      </div>
    </el-dialog>

    <!-- 删除确认弹窗 -->
    <ConfirmationDialog
      v-model:visible="deleteDialogVisible"
      :title="$t('assets.taskList.deleteConfirm')"
      :message="`${$t('assets.taskList.confirmDeleteTask')}&quot;${taskToDelete?.title}&quot;吗？`"
      :confirm-text="$t('assets.taskList.confirmDelete')"
      :cancel-text="$t('assets.cancel')"
      type="danger"
      @confirm="confirmDelete"
      @cancel="cancelDelete"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import { taskListStorage, type TaskListData } from '@/utils/taskListDB'
import { t as $t } from '@/plugins/i18nPlugin'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import ConfirmationDialog from '@/components/shared/Common/ConfirmationDialog.vue'
import EmptyState from '@/components/shared/Common/EmptyState.vue'
import { useStore } from '@/stores'
import { useLocaleStore } from '@/stores/localeStore'
import completeIcon from '@/assets/complete.png'
import pendingIcon from '@/assets/pending.png'

const router = useRouter()
const store = useStore()

// 响应式数据
const activeStatus = ref('all')
const loading = ref(false)
const currentPage = ref(1)
const pageSize = computed(() => store.pageSize)

// 搜索表单
const searchForm = ref({
  taskName: '',
  subjects: [] as string[],
  selectedDate: '' as string
})

// 教学任务数据
const taskList = ref<TaskListData[]>([])

// 弹窗相关
const studentDialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const selectedTaskStudents = ref<Array<{ id: string, name: string, classes: string[] }>>([])
const taskToDelete = ref<TaskListData | null>(null)

// 模拟学生数据
const mockStudents = [
  { id: '1', name: '张三河', classes: ['8年级冲刺班', '8年级冲刺班'] },
  { id: '2', name: '张二河', classes: ['8年级冲刺班'] },
  { id: '3', name: '张三河', classes: ['8年级冲刺班'] },
  { id: '4', name: '张三河', classes: ['8年级冲刺班', '8年级冲刺班'] },
  { id: '5', name: '张三河', classes: ['8年级冲刺班', '8年级冲刺班'] }
]

// 计算属性 - 筛选后的任务列表
const filteredTaskList = computed(() => {
  let filtered = [...taskList.value]

  // 按状态筛选
  if (activeStatus.value !== 'all') {
    filtered = filtered.filter(task => {
      switch (activeStatus.value) {
        case 'pending':
          return task.status === 'pending'
        case 'grading':
          return task.status === 'grading'
        case 'correction':
          return task.status === 'correction'
        case 'correcting':
          return task.status === 'correcting'
        case 'completed':
          return task.status === 'completed'
        default:
          return true
      }
    })
  }

  // 按任务名称筛选（模糊匹配）
  if (searchForm.value.taskName.trim()) {
    const keyword = searchForm.value.taskName.toLowerCase()
    filtered = filtered.filter(task =>
      task.title.toLowerCase().includes(keyword) ||
      task.description.toLowerCase().includes(keyword)
    )
  }

  // 按学科类型筛选（多选）
  if (searchForm.value.subjects.length > 0) {
    filtered = filtered.filter(task =>
      searchForm.value.subjects.includes(task.subject)
    )
  }

  // 按选定日期筛选
  if (searchForm.value.selectedDate) {
    const selectedDate = searchForm.value.selectedDate
    filtered = filtered.filter(task => {
      const taskStartDate = task.startTime.split(' ')[0]
      const taskEndDate = task.endTime.split(' ')[0]
      // 检查选定日期是否在任务的开始和结束日期之间
      return selectedDate >= taskStartDate && selectedDate <= taskEndDate
    })
  }

  return filtered
})

// 分页后的任务列表
const paginatedTaskList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredTaskList.value.slice(start, end)
})

// 加载任务列表
const loadTasks = async () => {
  loading.value = true
  try {
    await taskListStorage.init()
    const tasks = await taskListStorage.getTasks()
    // 按时间逆序排序（最新的在前面）
    taskList.value = tasks.sort((a, b) => {
      const timeA = new Date(a.createdAt || a.updatedAt).getTime()
      const timeB = new Date(b.createdAt || b.updatedAt).getTime()
      return timeB - timeA // 逆序排序，最新的在前面
    })
    console.log('任务列表加载成功:', taskList.value.length, '个任务')
  } catch (error) {
    console.error('加载任务列表失败:', error)
    ElMessage.error('加载任务列表失败')
    taskList.value = []
  } finally {
    loading.value = false
  }
}

// 状态变化处理
const handleStatusChange = (status: string) => {
  activeStatus.value = status
}

// 搜索处理
const handleSearch = () => {
  // 筛选逻辑在计算属性中处理，这里不需要额外操作
  console.log('执行搜索:', searchForm.value)
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    taskName: '',
    subjects: [],
    selectedDate: ''
  }
}

// 根据状态判断是否显示操作按钮
const canShowAction = (status: string, action: string): boolean => {
  const actionMap: Record<string, string[]> = {
    'pending': ['detail', 'edit', 'grade', 'copy', 'delete'],
    'grading': ['detail', 'grade', 'copy'],
    'correction': ['detail', 'correct', 'copy'],
    'correcting': ['detail', 'correct', 'copy'],
    'completed': ['detail', 'copy', 'delete']
  }

  return actionMap[status]?.includes(action) || false
}

// 查看任务详情
const viewTaskDetail = (task: TaskListData) => {
  console.log('查看任务详情，任务ID:', task.id)
  router.push({
    name: 'task-detail',
    params: {
      id: task.id
    }
  })
}

// 编辑任务
const editTask = (task: TaskListData) => {
  router.push({
    name: 'task-creation-wizard',
    query: {
      mode: 'edit',
      taskId: task.id
    }
  })
}

// 复制任务
const copyTask = (task: TaskListData) => {
  router.push({
    name: 'task-creation-wizard',
    query: {
      mode: 'copy',
      taskId: task.id
    }
  })
}

// 去批改
const gradeTask = (task: TaskListData) => {
  ElMessage.info('批改功能开发中...')
}

// 去订正
const correctTask = (task: TaskListData) => {
  ElMessage.info('订正功能开发中...')
}

// 删除任务
const deleteTask = (task: TaskListData) => {
  taskToDelete.value = task
  deleteDialogVisible.value = true
}

// 确认删除
const confirmDelete = async () => {
  if (!taskToDelete.value) return

  try {
    await taskListStorage.deleteTask(taskToDelete.value.id)
    ElMessage.success($t('assets.taskList.deleteSuccess'))
    deleteDialogVisible.value = false
    taskToDelete.value = null
    await loadTasks() // 重新加载任务列表
  } catch (error) {
    console.error('删除任务失败:', error)
    ElMessage.error($t('assets.taskList.deleteFailed'))
  }
}

// 取消删除
const cancelDelete = () => {
  deleteDialogVisible.value = false
  taskToDelete.value = null
}

// 显示关联学生弹窗
const showStudentDialog = (task: TaskListData) => {
  selectedTaskStudents.value = mockStudents.slice(0, Math.min(task.studentCount, mockStudents.length))
  studentDialogVisible.value = true
}

// 获取任务关联学生（用于tooltip）
const getTaskStudents = (task: TaskListData) => {
  return mockStudents.slice(0, Math.min(3, task.studentCount))
}

// 获取学科颜色
const getSubjectColor = (subject: string): string => {
  const colorMap: Record<string, string> = {
    'math': '#2196f3',
    'chinese': '#9c27b0',
    'english': '#4caf50',
    'other': '#9e9e9e'
  }
  return colorMap[subject] || colorMap['other']
}

// 获取学科背景颜色（主色的浅色版本）
const getSubjectBackgroundColor = (subject: string): string => {
  const colorMap: Record<string, string> = {
    'math': 'rgba(33, 150, 243, 0.1)',      // 蓝色的10%透明度
    'chinese': 'rgba(156, 39, 176, 0.1)',   // 紫色的10%透明度
    'english': 'rgba(76, 175, 80, 0.1)',    // 绿色的10%透明度
    'other': 'rgba(158, 158, 158, 0.1)'     // 灰色的10%透明度
  }
  return colorMap[subject] || colorMap['other']
}

// 格式化日期
const formatDate = (dateStr: string): string => {
  if (!dateStr) return ''
  return dateStr.split(' ')[0] // 只显示日期部分
}

// 获取状态类型（用于el-tag）
const getStatusType = (status: string): string => {
  const typeMap: Record<string, string> = {
    'pending': 'warning',
    'grading': 'primary',
    'correction': 'info',
    'correcting': 'info',
    'completed': 'success'
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: string): string => {
  switch (status) {
    case 'pending':
      return $t('assets.taskList.pending')
    case 'grading':
      return $t('assets.taskList.grading')
    case 'correction':
      return $t('assets.taskList.correction')
    case 'correcting':
      return $t('assets.taskList.correcting')
    case 'completed':
      return $t('assets.taskList.completed')
    case 'created':
      return $t('assets.taskList.created')
    default:
      return status
  }
}

// 获取状态图标
const getStatusIcon = (status: string): string => {
  switch (status) {
    case 'pending':
      return pendingIcon    // 待批改 - 灰色圆圈
    case 'grading':
      return pendingIcon    // 批改中 - 蓝色圆圈
    case 'correction':
      return pendingIcon    // 待订正 - 灰色圆圈
    case 'correcting':
      return pendingIcon    // 订正中 - 蓝色圆圈
    case 'completed':
      return completeIcon   // 已完成 - 绿色勾选
    case 'created':
      return completeIcon   // 创建 - 绿色勾选
    default:
      return pendingIcon
  }
}

// 获取状态颜色
const getStatusColor = (status: string): string => {
  switch (status) {
    case 'pending':
      return '#909399'  // 灰色 - 待批改
    case 'grading':
      return '#409EFF'  // 蓝色 - 批改中
    case 'correction':
      return '#909399'  // 灰色 - 待订正
    case 'correcting':
      return '#409EFF'  // 蓝色 - 订正中
    case 'completed':
      return '#67C23A'  // 绿色 - 已完成
    case 'created':
      return '#67C23A'  // 绿色 - 创建
    default:
      return '#909399'
  }
}

// 获取步骤图标
const getStepIcon = (step: string, currentStatus: string): string => {
  const isCompleted = isStepCompleted(step, currentStatus)
  const isActive = isStepActive(step, currentStatus)

  if (isCompleted || isActive) {
    return completeIcon
  } else {
    return pendingIcon
  }
}

// 获取步骤颜色
const getStepColor = (step: string, currentStatus: string): string => {
  const isCompleted = isStepCompleted(step, currentStatus)
  const isActive = isStepActive(step, currentStatus)

  if (isCompleted) {
    return '#67C23A'  // 绿色 - 已完成
  } else if (isActive) {
    return '#409EFF'  // 蓝色 - 进行中
  } else {
    return '#909399'  // 灰色 - 未开始
  }
}

// 判断步骤是否已完成
const isStepCompleted = (step: string, currentStatus: string): boolean => {
  switch (step) {
    case 'created':
      return ['pending', 'grading', 'correction', 'correcting', 'completed'].includes(currentStatus)
    case 'grading':
      return ['correction', 'correcting', 'completed'].includes(currentStatus)
    case 'correction':
      return currentStatus === 'completed'
    default:
      return false
  }
}

// 判断步骤是否正在进行
const isStepActive = (step: string, currentStatus: string): boolean => {
  switch (step) {
    case 'created':
      return currentStatus === 'created'
    case 'grading':
      return ['pending', 'grading'].includes(currentStatus)
    case 'correction':
      return ['correction', 'correcting'].includes(currentStatus)
    default:
      return false
  }
}

// 获取批改阶段文本
const getGradingStepText = (status: string): string => {
  switch (status) {
    case 'pending':
      return '待批改'
    case 'grading':
      return '批改中'
    case 'correction':
    case 'correcting':
    case 'completed':
      return '批改完成'
    default:
      return '批改完成'
  }
}

// 获取订正阶段文本
const getCorrectionStepText = (status: string): string => {
  switch (status) {
    case 'correction':
      return '待订正'
    case 'correcting':
      return '订正中'
    case 'completed':
      return '已完成'
    default:
      return '待订正'
  }
}

// 获取可见的操作列表
const getVisibleActions = (status: string) => {
  const actions = []

  if (canShowAction(status, 'detail')) {
    actions.push({ key: 'detail', text: $t('assets.taskList.detail') })
  }
  if (canShowAction(status, 'edit')) {
    actions.push({ key: 'edit', text: $t('assets.taskList.edit') })
  }
  if (canShowAction(status, 'grade')) {
    actions.push({ key: 'grade', text: $t('assets.taskList.goGrading') })
  }
  if (canShowAction(status, 'correct')) {
    actions.push({ key: 'correct', text: $t('assets.taskList.goCorrection') })
  }
  if (canShowAction(status, 'copy')) {
    actions.push({ key: 'copy', text: $t('assets.taskList.copy') })
  }
  if (canShowAction(status, 'delete')) {
    actions.push({ key: 'delete', text: $t('assets.taskList.delete') })
  }

  return actions
}

// 处理操作点击
const handleAction = (actionKey: string, row: any) => {
  switch (actionKey) {
    case 'detail':
      viewTaskDetail(row)
      break
    case 'edit':
      editTask(row)
      break
    case 'grade':
      gradeTask(row)
      break
    case 'correct':
      correctTask(row)
      break
    case 'copy':
      copyTask(row)
      break
    case 'delete':
      deleteTask(row)
      break
    default:
      console.warn('Unknown action:', actionKey)
  }
}

// 创建教学任务
const createTask = () => {
  router.push({ name: 'task-creation-wizard' })
}

// 分页处理函数
const handleSizeChange = (size: number) => {
  store.setPageSize(size)
  currentPage.value = 1
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
}

onMounted(async () => {
  console.log('教学任务列表页面加载完成')

  // 调试：检查当前语言设置
  const localeStore = useLocaleStore()
  console.log('当前语言设置:', localeStore.locale)
  console.log('localStorage语言:', localStorage.getItem('i18nextLng'))

  // 检查是否从任务创建页面跳转过来
  const route = useRoute()
  if (route.query.newTaskCreated === 'true' && route.query.taskName) {
    ElMessage.success(`教学任务 "${route.query.taskName}" 创建成功！`)
  }

  // 检查是否需要重新初始化示例数据（语言切换后）
  const currentLanguage = localStorage.getItem('i18nextLng') || 'zh-CN'
  const lastLanguage = localStorage.getItem('taskListLanguage')

  if (lastLanguage && lastLanguage !== currentLanguage) {
    console.log('检测到语言切换，重新初始化示例数据')
    await taskListStorage.forceReinitSampleData()
  }

  // 记录当前语言
  localStorage.setItem('taskListLanguage', currentLanguage)

  // 加载任务列表
  await loadTasks()

  // 如果有refresh参数，强制刷新列表
  if (route.query.refresh === 'true') {
    setTimeout(async () => {
      await loadTasks()
    }, 500) // 延迟500ms确保数据已保存
  }

  // 清理URL查询参数，防止页面刷新时重复显示消息
  if (Object.keys(route.query).length > 0) {
    router.replace({ path: route.path })
  }
})
</script>

<style scoped>
.task-list-container {
  padding: 24px;
  min-height: 100%;
  background: var(--content-bg-color);
  color: var(--text-color-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 分类标签栏 */
.status-tabs {
  margin-bottom: 24px;
  padding: 16px 24px;
  background: var(--card-bg-color);
  color: var(--text-color-primary);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border-color-secondary);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tabs-left {
  flex: 1;
}

.tabs-right {
  flex-shrink: 0;
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  display: none;
}

:deep(.el-tabs__item) {
  font-size: 14px;
  color: #606266;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
  font-weight: 600;
}

:deep(.el-tabs__active-bar) {
  background-color: #409EFF;
}

/* 筛选功能栏 */
.filter-section {
  margin-bottom: 24px;
  padding: 20px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
}

:deep(.el-form-item) {
  margin-bottom: 0;
}

:deep(.el-form-item__label) {
  font-size: 14px;
  color: #606266;
}

/* 任务列表表格 */
.task-table {
  background: var(--card-bg-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  min-height: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  border-top: 1px solid var(--border-color-secondary);
  background: var(--card-bg-color);
}

:deep(.el-table) {
  border-radius: 8px;
  background-color: var(--card-bg-color);
}

:deep(.el-table__header) {
  background: var(--table-header-bg-color);
}

:deep(.el-table th) {
  background: var(--table-header-bg-color);
  color: var(--text-color-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-color-secondary);
}

:deep(.el-table td) {
  background-color: var(--card-bg-color);
  color: var(--text-color-primary);
  border-bottom: 1px solid var(--table-border-color);
}

/* 任务名称单元格 */
.task-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.task-icon {
  font-size: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  flex-shrink: 0;
}

.task-info {
  flex: 1;
}

.task-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  cursor: pointer;
  transition: color 0.3s;
}

.task-title.clickable:hover {
  color: #409EFF;
}

.task-subtitle {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}

/* 关联学生 */
.student-count {
  font-size: 16px;
  font-weight: 600;
  color: #409EFF;
  cursor: pointer;
  transition: all 0.3s;
}

.student-count.clickable:hover {
  color: #66b1ff;
  transform: scale(1.1);
}

/* 任务时间 */
.task-time {
  font-size: 14px;
  color: #606266;
  line-height: 1.4;
  white-space: nowrap;
}

/* 三段式状态进度容器 */
.status-progress-container {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 20px;
  justify-content: center;
  min-width: 260px;
  margin: 0;
  padding: 0;
}

/* 消除状态列的表格单元格内边距 */
:deep(.el-table .status-column) {
  padding: 0 !important;
}

:deep(.el-table .status-column .cell) {
  padding: 0 !important;
}

.status-step {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.step-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.step-text {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.step-arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 操作链接样式 */
.action-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.action-link {
  color: #409EFF;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s;
}

.action-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.action-separator {
  color: #dcdfe6;
  font-size: 14px;
  margin: 0 4px;
}

.more-actions {
  font-weight: bold;
  letter-spacing: 1px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.action-buttons .el-button {
  margin: 0;
}

/* 关联学生弹窗样式 */
.student-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.student-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.student-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.student-classes {
  font-size: 12px;
  color: #606266;
  background: #e3f2fd;
  padding: 4px 8px;
  border-radius: 12px;
}

/* 学生信息Tooltip样式 */
.student-tooltip-content {
  padding: 8px 0;
}

.tooltip-title {
  font-weight: 600;
  font-size: 13px;
  color: #303133;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e4e7ed;
}

.tooltip-students {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tooltip-student {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.tooltip-student .student-name {
  font-size: 12px;
  color: #303133;
  font-weight: 500;
}

.tooltip-student .student-class {
  font-size: 11px;
  color: #606266;
  background: #f0f2f5;
  padding: 2px 6px;
  border-radius: 8px;
}



/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }

  :deep(.el-form-item) {
    margin-right: 0;
  }
}

/* iPad 专用优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .task-list-container {
    padding: 20px;
  }

  .task-icon {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .action-buttons .el-button {
    min-height: 44px;
    padding: 12px 20px;
  }

  :deep(.el-table th),
  :deep(.el-table td) {
    padding: 16px 12px;
  }

  .student-count {
    font-size: 18px;
  }
}

/* iPad Pro 优化 */
@media (min-width: 1024px) and (max-width: 1366px) {
  .task-list-container {
    padding: 24px;
  }

  .task-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
  .clickable {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  .action-buttons .el-button {
    min-height: 44px;
    min-width: 44px;
  }

  .student-count.clickable {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .task-list-container {
    padding: 16px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  :deep(.el-table .cell) {
    padding: 8px;
    text-align: center;
  }
}
</style>